<template>
  <div class="root flex-col fill">
    <div class="editOptions" v-if="type!=='preview'">
      <div class="flex-row items-center">
        <div style="width: 100px">
          <vs-switch v-model="isBlog">
            <template #off>
              普通文章
            </template>
            <template #on>
              博客
            </template>
          </vs-switch>
        </div>
        <vs-input  class="flex-1"  v-model="title" placeholder="文章标题">
          <template #icon>
            <i class='iconfont icon-biaoti'></i>
          </template>
        </vs-input>
        <vs-input  style="width: 200px"   v-model="tag" placeholder="标签">
          <template #icon>
            <i class='iconfont icon-biaoti'></i>
          </template>
        </vs-input>
      </div>
    </div>
    <div class="meta" v-if="type==='preview'&&isBlog">
      <div class="title">{{title}}</div>
      <ul class="infos flex-row justify-center">
        <li v-for="item in meta.list" :key="item.icon" @click="handleItemClick(item)">
          <WIcon :icon="item.icon"/> {{item.value}}
        </li>
      </ul>
    </div>
    <mavon-editor
        class="flex-1"
        :value="content||''"
        :defaultOpen="defaultOpen"
        :toolbars-flag="toolbarsFlag"
        :subfield="subfield"
        @save="handleSave"
    />
    <div v-if="isBlog" ref="comment" class="comment pn flex-col" :class="{'comment-active': openComment}">
      <WIcon @click.native="handleOpenComment" class="wicon" icon="icon-danchu-copy"/>
      <div class="input-area" v-if="openComment">
        <div class="flex-row items-center w-fill">
          <div class="usericon">
            <WIcon size="30" :icon="icon"/>
          </div>
          <div class="input flex-1">
            <vs-input v-model="comment" placeholder="发表你的评论"/>
          </div>

        </div>
        <div class="flex-row items-center w-fill justify-end">
          <vs-input color="#7d33ff" border  type="primary" v-model="email" placeholder="你的邮箱"/>
          <div class="btn">
            <vs-button  color="rgb(59,222,200)" @click="handlePostComment"
                        gradient>评论</vs-button>
          </div>
        </div>
      </div>
      <div class="comment-list flex-1">
        <div class="comment-item flex-row" v-for="(item, index) in commentList" :key="index">
          <div class="index">#{{index+1}}</div>
          <div class="left self-center"><WIcon :size="35" :icon="item.icon"/></div>
          <div class="right flex-col justify-between flex-1">
            <div class="content">{{item.content}}</div>
            <div class="infos flex-row justify-between">
              <div class="flex-row">
                <div class="author" v-if="item.createBy">{{item.createBy}}</div>
                <div class="time">{{item.createTime}}</div>
              </div>
              <div class="like cursor-pointer" @click="handleCommentLike(item)">
                <WIcon  icon="icon-dianzan"/>
                <span class="like msl mnr">{{item.like}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WIcon from "@/components/icon/WIcon"
import {commentApi} from "@/api/table/comment"
import {fileApi} from "@/api/table/file"
export default {
  name: "TextEditor",
  components: {WIcon},
  props: {
    /*value: {
      type: String,
      default: "### abc"
    },
    type: {
      type: String,  // preview, edit
      default: "preview"
    },*/
  },
  data: () => ({
    item: null,
    id: "",
    content: "",
    type: "preview",
    callback: null,
    title: "",
    tag: "",
    isBlog: false,
    read: "",
    like: "",
    createTime: "",
    meta: {
      title: "",
      list: [
        {label: "创建时间", value: "", icon: "icon-shijian"},
        {label: "阅读", value: "", icon: "icon-yanjing"},
        {label: "点赞", value: "", icon: "icon-dianzan", click: 'handleArticleLike'},
        {label: "评论", value: "", icon: "icon-pinglun"},
      ]
    },
    openComment: false,
    email: "",
    comment: "",
    commentList: [],
  }),
  computed: {
    defaultOpen() {
      return this.type === "edit" ? "edit" : "preview"
    },
    subfield() {
      return this.type === "edit"
    },
    toolbarsFlag() {
      return this.type === "edit"
    },
    user() {
      let user = this.$store.state.user
      return Object.keys(user).length ? user : null
    },
    icon() {
      return this.user ? this.user.avatar : "icon-yonghu1"
    }
  },
  watch:{
    commentList(val) {
      this.meta.list[3].value = val.length
    }
  },
  methods: {
    //eslint-disable-next-line no-unused-vars
    onReceiveMsg(from, {type, item, callback}) {
      Object.assign(this.$data, this.$options.data(), {type, callback, ...item})
      this.meta.list[0].value = item.createTime
      this.meta.list[1].value = item.read
      this.meta.list[2].value = item.like
      this.item = item
      if(item.isBlog){
        this.fetchComment()
        this.processReadPlus()
      }
    },
    handleSave(value) {
      if (this.callback) {
        this.callback({value, title: this.title, isBlog: this.isBlog, tag: this.tag})
      }
    },
    handleItemClick(item) {
      if(item.click){
        eval(`this.${item.click}.call()`)
      }
    },
    // 发表评论
    handlePostComment() {
      if(!this._checkCommentValid()){
        this.$msg.warning("评论不能为空")
        return
      }
      commentApi.add({
        fileId: this.id,
        icon: this.icon,
        createBy: this.user ? (this.user.trueName||this.user.username) :this.email || "匿名",
        content: this.comment
      }).then(ret=>{
        if(ret.code===0){
          this.$msg.success("评论成功")
          this.comment =  ""
          this.fetchComment()
        }
      })
    },
    _checkCommentValid() {
      return this.comment && this.comment.length < 20
    },
    // 评论点赞
    handleCommentLike(item) {
      commentApi.update({id: item.id, like: item.like+1})
      item.like+=1
    },
    handleArticleLike() {
      this.item.like += 1
      this.meta.list[2].value += 1
      fileApi.update({
        id: this.id,
        like: this.meta.list[2].value + 1
      })
    },
    // 获取评论
    fetchComment() {
      const loading = this.$vs.loading({
        target: this.$refs.comment,
      })
      commentApi.getAll({fileId: this.id}).then(ret=>{
        this.commentList = ret.data
        loading.close()
      })
    },
    // 文章阅读+1
    processReadPlus() {
      fileApi.update({
        id: this.id,
        read: this.meta.list[1].value + 1
      }).then(()=>{
        this.item.read += 1
        this.meta.list[1].value += 1
      })
    },
    handleOpenComment() {
      this.openComment = !this.openComment
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
.root {
  //height: 600px;
  //left: 100px;
  //top: 100px;
  user-select: none;
  position: relative;
  ::v-deep{
    .vs-input-parent{
      //flex: 1;
      .vs-input {
        width: 100%;
        //flex: 1;
      }
      .vs-input__label{
        //display: none;
        width: 70%;
      }
    }

  }
}

.meta{
  .title{
    font-size: 20px;
    color: $text-primary;
    text-align: center;
    line-height: 1.5em;
  }
  li{
    margin: 0 $mn;
  }
}

.comment{
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  transition: all 0.5s;
  height: 0;
  background-color: #E4E7ED;
  z-index: 1501;
  //overflow: auto;
  .wicon{
    cursor: pointer;
    z-index: 1501;
    position: absolute;
    top: 0;
    padding: 10px;
    border-radius: 50%;
    left: 50%;
    transition: all 0.5s;
    animation: 0.5s bounce infinite linear;
    transform: translate(-50%, -100%);
    &:hover{
      background-color: rgba(0,0,0,0.1);
    }
  }
}
.comment-active{
  height: 80%;
  .wicon{
    transform: translate(-50%, -100%) rotateZ(180deg);
    animation: unset;
  }
}
.comment-list{
  overflow: auto;
  .comment-item{
    //height: 30px;
    margin-top: $mn;
    background-color: white;
    border-radius: 5px;
    padding: $ps;
    .index{
      color: $text-warning;
    }
    .right{
      margin-left: $ms;
      .content{
        color: $text-main;
        line-height: 1.2em;
        display: -webkit-box;
        -webkit-line-clamp:2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
      .infos{
        color: $text-info;
        margin-top: $mn;

        .author{
          color: $text-primary;
          margin-right: $mn;
        }
      }
    }

  }
}
@keyframes bounce {
  from{
    top: 0
  }
  to{
    top: -2px;
  }
}
</style>
